<template>
	<!-- 特权福利-小幸运 -->
	<view class="samll-lucky-page">
		<!-- 小幸运 -->
		<scroll-view scroll-y="true" :style="'height:'+height+'px'" @scrolltolower="loadingMore">
			<view :class="index==0&&!fromHome?'topMarg samll-lucky':'samll-lucky'" @click="toDetail(item.id)" v-for="(item,index) in luckList" :key="item.id">
				<view class="samll-lucky-img">
					<image :src="item.main_img" style="width: 100%;height: 388upx;" mode="aspectFill"></image>
					<view>
						{{item.grade}}可参与
					</view>
				</view>
				<view v-if="item.luckyPrize!=undefind&&item.luckyPrize!=''">
					奖品：{{item.luckyPrize}}
				</view>
				<view class="lucky-lottery" style="display: flex;justify-content: space-between;margin-top: 14upx;">
					<view>
						<text v-if="item.open_type==1">{{item.openT}}自动开奖</text>
						<text v-if="item.open_type==2&&item.quota!=null">{{item.cTime}}&nbsp;满{{item.quota}}人&nbsp;自动开奖</text>
						<text>已参与人数{{item.population}}人</text>
					</view>
					<view v-if="item.states==0">
						立即参与
					</view>
					<view class="already-join" v-else>
						已参与
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		formatLuckyTime,formatMD
	} from '@/common/util.js'
	import ending from '../../../common/ending.vue'
	export default{
		components:{ending},
		data(){
			return{
				luckList: [],
				page: 1,
				last_page: 1,
				pagesize: 10,
				height: 0,
				token: this.$store.getters.getToken,
				userId: this.$store.getters.getUserId
			}
		},
		props: {
			fromHome: {
				type: Boolean,
				default: function(){
					return false
				}
			}
		},
		created() {
			this.getLuck()
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
		},
		methods:{
			toDetail(id){
				uni.navigateTo({
					url: "../smallLuckydetail/luckyJoinDetail?id="+id
				})
			},
			// 小幸运数据
			getLuck(){
				this.page = 1
				let data = {
					token: this.token,
					user_id: this.userId,
					pagesize: this.pagesize,
					page:this.page 
				}
				this.$api.get_all_start_lucky(data).then(res =>{
					console.log('获取小幸运数据列表',res)
					if(res.status){
						this.luckList = res.list.data
						this.last_page = res.list.last_page
						for(let i=0;i<res.list.data.length;i++) {
							let time = res.list.data[i].open_time
							res.list.data[i].openT = formatLuckyTime(time)
							res.list.data[i].cTime = formatMD(res.list.data[i].create_time)
							let str = []
							for(let j=0;j<res.list.data[i].prize.length;j++) {
								str.push(res.list.data[i].prize[j].prize+'×'+res.list.data[i].prize[j].num)
							}
							res.list.data[i].luckyPrize = str.join(',')
							console.log('小幸运奖品字符串',res.list.data[i].luckyPrize)
						}
					}
				}).catch(err => {
					console.log('获取小幸运数据列表',err)
				})
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.token,
						user_id: this.userId,
						pagesize: this.pagesize,
						page:this.page 
					}
					this.$api.get_all_start_lucky(data).then(res =>{
						console.log('获取小幸运数据列表',res)
						if(res.status){
							for(let i=0;i<res.list.data.length;i++) {
								let time = res.list.data[i].open_time
								res.list.data[i].openT = formatLuckyTime(time)
								res.list.data[i].openT1 = formatMD(time)
								let str = []
								for(let j=0;j<res.list.data[i].prize.length;j++) {
									str.push(res.list.data[i].prize[j].prize+'×'+res.list.data[i].prize[j].num)
								}
								res.list.data[i].luckyPrize = str.join(',')
								console.log('小幸运奖品字符串',res.list.data[i].luckyPrize)
							}
							this.luckList = this.luckList.concat(res.list.data)
							this.last_page = res.list.last_page
						}
					}).catch(err => {
						console.log('获取小幸运数据列表',err)
					})
				}
			}
		}
	}
</script>

<style>
	.samll-lucky-page{
		width: 100%;
		height: 100%;
		position: relative;
		background: #F5F6F9;
	}
	.samll-lucky{
		width: 100%;
		/* height: 600upx; */
		background: #fff;
		margin-bottom: 16upx;
		padding: 30upx;
		box-sizing: border-box;
	}
	.topMarg{
		margin-top: 88upx;
	}
	.samll-lucky-img{
		width: 100%;
		height: 388upx;
		position: relative;
	}
	.samll-lucky-img>view{
		width: 220upx;
		height: 50upx;
		background: url(https://lightplanet.tuanhaoke.cn/img/privilege/lucky_bg.png);
		background-size: 100% 100%;
		position: absolute;
		left: 0;top: 0;
		color: #fff;
		line-height: 50upx;
		text-align: center;
		font-size: 24upx;
	}
	.samll-lucky>view:nth-child(2){
		margin-top: 20upx;
		line-height: 48upx;
		color: #333;
		font-size: 34upx;
	}
	.lucky-lottery>view>text{
		display: block;
	}
	.lucky-lottery>view>text:first-child{
		color: #FF3C00;
		font-size: 28upx;
		line-height: 40upx;
	}
	.lucky-lottery>view>text:last-child{
		color: #999999;
		font-size: 24upx;
		line-height: 34upx;
	}
	.lucky-lottery>view:last-child{
		width: 180upx;
		height: 60upx;
		border-radius: 30upx;
		background: linear-gradient(#B3EA00,#00A66A);
		box-shadow: 0 4upx 8upx 0 rgba(0, 166, 106, 0.35);
		text-align: center;
		line-height: 60upx;
		font-size: 30upx;
		color: #fff;
		margin-top: 10upx;
	}
	.lucky-lottery>view.already-join{
		color: #666;
		background: #EFEFEF;
		box-shadow: none;
	}
</style>
